<#escape x as x?html>
<template>
  <div class="fm-style">
    <el-form
      ref="generateForm"
      label-suffix=":"
      size="${data.config.size}"
      :model="models"
      :rules="rules"
      label-position="${data.config.labelPosition}"
      label-width="${data.config.labelWidth}px"
    >
      <#list data.list as item>
        <#if item.type == "grid">
          <el-row
            type="flex"
            :gutter="${item.options.gutter!0}"
            justify="${item.options.justify}"
            align="${item.options.align}"
          >
            <#list item.columns as col>
            <el-col :span="${col.span}">
              <#list col.list as citem>
                <#if citem.type?? && citem.type == "blank">
                <el-form-item label="${citem.name}" prop="${citem.model}">
                  <slot name="${citem.model}" :model="models"/>
                </el-form-item>
                <#elseif citem.type??>
                <#assign widget=citem dataModel="models."+citem.model!"">
                <#include "form-item.vue.ftl" />
                </#if>
              </#list>
            </el-col>
            </#list>
          </el-row>
        <#elseif item.type == "blank">
          <el-form-item label="${item.name}" prop="${item.model}">
            <slot name="${item.model}" :model="models"/>
          </el-form-item>
        <#else>
            <#assign widget=item dataModel="models."+item.model!"">
            <#include "form-item.vue.ftl" />
        </#if>
      </#list>
    </el-form>
  </div>
</template>
</#escape>

<script>
  export default {
    name: 'Detail',
    data() {
      return {
        models: ${modelJson},
        rules: ${rulesJson}
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      onInputChange(value, field) {
      },
      refresh() {
      }
    }
  }
</script>

<style lang="scss">

</style>
